<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Tesseract.js Offline</title>
    <style>
        #continor{
            width: 500px;
            border: 2px solid rgb(16, 161, 84);
            margin: 100px;
            padding: 30px;
        }
    </style>
<body>
    <div>
        <input type="file" id="input">
    </div>
    <div id="continor">请上传带文字图片</div>


    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="./js/tesseract.min.js"></script>
    <script>
        const { createWorker } = Tesseract;
        const worker = createWorker({
            workerPath: './js/worker.min.js',
            langPath: './lang-data',
            corePath: './js/tesseract-core.wasm.js',
            logger: m => console.log(m),
        });
        init();
        async function init() {
            await worker.load();
            // // 中文识别包
            await worker.loadLanguage('chisim');
            await worker.initialize('chisim');


            // 英文识别包
            // await worker.loadLanguage('eng');
            // await worker.initialize('eng');
        }
        async function gender() {
            const img = $('#input').val();
            if (!img) {
                alert('请选择图片');
                return;
            }
            const { data: { text } } = await worker.recognize(img);
            console.log(text);
            // worker.terminate();
        }
        $('#input').on('change', e => {
            const file = e.target.files[0];
            const formData = new FormData();
            formData.append("file", file);
            $.ajax({
                type: "post",
                url: "http://localhost:3000/upload",
                data: formData,
                contentType: false,
                //默认文件类型application/x-www-form-urlencoded  设置之后multipart/form-data
                processData: false,
                // 默认情况下会对发送的数据转化为对象 不需要转化的信息
                success: async res => {
                    const { data: { text } } = await worker.recognize(res.url);
                    console.log(text);
                    $('#continor').html(text);
                },
            });
        })
    </script>
</body>
</head>

<body>
</body>

</html>